<template>
  <div class="total-container">
    <div class="row-container">
      <div class="row-item-container">
        <div
          class="grid-content bg-purple item-bg1 hover"
          @click="toMyDeal"
        >
          <div class="top-content">
            <div class="top-left">
              <div class="icon-container">
                <i class="iconfont icon-zuodaohang-dingdanyuhuikuan title-icon" />
              </div>
              <div class="title">待我审批</div>
            </div>
          </div>
          <div class="bottom-content">
            <div class="bottom-total-num">{{ total.forMyApproval }}</div>
          </div>
        </div>
      </div>
      <div class="row-item-container">
        <div class="grid-content bg-purple item-bg2">
          <div class="top-content">
            <div class="top-left">
              <div class="icon-container">
                <i class="iconfont icon-zuodaohang-dingdanyuhuikuan title-icon" />
              </div>
              <div class="title">今日下单</div>
            </div>
            <div class="top-right">
              <span class="total-num">{{ total.todayOrderCount }}笔</span>
            </div>
          </div>
          <div class="bottom-content">
            <div class="bottom-total-num"><span>{{ moneyFormat(total.todayOrder, 0) }}</span><span class="unit">元</span></div>
          </div>
        </div>
      </div>
      <div class="row-item-container">
        <div class="grid-content bg-purple item-bg3">
          <div class="top-content">
            <div class="top-left">
              <div class="icon-container">
                <i class="iconfont icon-zuodaohang-dingdanyuhuikuan title-icon" />
              </div>
              <div class="title">今日营销额</div>
            </div>
          </div>
          <div class="bottom-content">
            <div class="bottom-total-num"><span>{{ moneyFormat(total.todaySale,0) }}</span><span class="unit">元</span></div>
          </div>
        </div>
      </div>
      <div class="row-item-container">
        <div class="grid-content bg-purple item-bg4">
          <div class="top-content">
            <div class="top-left">
              <div class="icon-container">
                <i class="iconfont icon-zuodaohang-dingdanyuhuikuan title-icon" />
              </div>
              <div class="title">今日回款</div>
            </div>
            <div class="top-right">
              <span class="total-num">{{ total.todayReturnedMoneyCount }}笔</span>
            </div>
          </div>
          <div class="bottom-content">
            <div class="bottom-total-num"><span>{{ moneyFormat(total.todayReturnedMoney, 0) }}</span><span class="unit">元</span></div>
          </div>
        </div>
      </div>
      <div class="row-item-container">
        <div class="grid-content bg-purple item-bg5">
          <div class="top-content">
            <div class="top-left">
              <div class="icon-container">
                <i class="iconfont icon-zuodaohang-dingdanyuhuikuan title-icon" />
              </div>
              <div class="title">今日注册终端</div>
            </div>
          </div>
          <div class="bottom-content">
            <div class="bottom-total-num"><span>{{ total.todayTerminal }}</span><span class="unit">家</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent, inject, onMounted, reactive, toRefs} from 'vue'
import {useRouter} from 'vue-router'

export default defineComponent({
  setup(props, context) {
    const router = useRouter()
    const api = inject('api')
    var datas = reactive({
      total: {},
    })
    const getTotal = () => {
      api.dashboard.GET_TOTAL().then((res) => {
        if (res.code === 0) {
          console.log(res.data)
          datas.total = res.data
        }
      })
    }
    const toMyDeal = () => {
      router.push({
        path: '/audit/myDealWith',
      })
    }
    onMounted(() => {
      getTotal()
    })
    return {
      ...toRefs(datas),
      toMyDeal,
    }
  },
})
</script>

<style lang="scss" scoped>
.total-container {
  .row-container {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .row-item-container {
      width: calc(20% - 16px);
      border-radius: 8px;
    }
    .bg-purple {
      padding: 15px;
      box-sizing: border-box;
    }
    .grid-content {
      border-radius: 8px;
      height: 120px;
      .top-content {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        .top-left {
          font-size: 18px;
          color: #fff;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .icon-container {
            width: 24px;
            height: 24px;
            margin-right: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            .title-icon {
              font-size: 24px;
            }
          }
          .title {
            font-size: 18px;
            line-height: 18px;
            font-weight: bold;
          }
        }
        .top-right {
          .total-num {
            font-size: 18px;
            color: #fff;
          }
        }
      }
      .bottom-content {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 20px;
        margin-left: 25px;
        .bottom-total-num {
          font-size: 40px;
          color: #fff;
          font-weight: bold;
          .unit {
            font-size: 24px;
            font-weight: bold;
          }
        }
      }
    }
    .item-bg1 {
      background: url("@CRM/assets/img/num_5.png");
    }
    .item-bg2 {
      background: url("@CRM/assets/img/num_1.png");
    }
    .item-bg3 {
      background: url("@CRM/assets/img/num_2.png");
    }
    .item-bg4 {
      background: url("@CRM/assets/img/num_3.png");
    }
    .item-bg5 {
      background: url("@CRM/assets/img/num_4.png");
    }
    .hover {
      cursor: pointer;
    }
  }
}
@media screen and (max-width: 1360px) {
  .bottom-total-num {
    font-size: 32px !important;
    .unit {
      font-size: 20px !important;
    }
  }
}
</style>
